<template>
  <div class="phone1">
    <ul class="clearfix">
      <li>
        <div class="count">
          <p>本月总产量</p>
          <p class="conuts">16625吨</p>
        </div>
      </li>
      <li>
        <div class="count">
          <p>待产量</p>
          <p class="conuts">12536吨</p>
        </div>
      </li>
      <li>
        <div class="count">
          <p>本月废品率</p>
          <p class="conuts_waring">废品4件，废品38.2吨，良品率98.6%</p>
        </div>
      </li>
      <li>
        <div class="count">
          <p>设备开工率</p>
          <p class="conuts">65.6%</p>
        </div>
      </li>
      <li>
        <div class="count">
          <p>本月延期发货</p>
          <p class="conuts">4次</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup name="phonePage1_1">
import {reactive, onMounted, nextTick, defineAsyncComponent} from "vue";
</script>

<style scoped lang="scss">
.phone1{
  border: 1px solid #32a99e;
  ul li{
    float: left;
    width: 33%;
    height: 60px;
    list-style: none;
    position: relative;
    .count{
      position: absolute;
      top: 10px;
      left: 10px;
      p.conuts{
        color: #0048ff;
        text-shadow: 0 0 25px #0048ff;
        font-size: 14px;
        font-weight: bolder;
      }
      p.conuts_waring{
        color: #f10631;
        text-shadow: 0 0 25px #f10631;
        font-size: 12px;
        font-weight: bolder;
      }
    }
  }
}
</style>
